<template>
  <a-layout :class="$style['system-layout']" hasSider>
    <a-layout-sider
      :class="$style['system-layout-aside']"
      :collapsed="computedCollapsed"
      @update:collapsed="setCollapsed"
      collapsible
    >
      <section :class="$style['aside-layout']">
        <header :class="$style['aside-header']">
          <p :class="$style['title']" v-show="!computedCollapsed">GIS-DEMO</p>
          <p :class="$style['title']" v-show="computedCollapsed">GIS</p>
        </header>
        <section :class="$style['aside-content']">
          <slot name="menus" />
        </section>
      </section>
    </a-layout-sider>
    <a-layout :class="$style['system-layout-layout']">
      <a-layout-content :class="$style['system-layout-layout-content']">
        <section :class="$style['main-layout']">
          <section :class="$style['main-content']">
            <slot name="content" />
          </section>
        </section>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script lang="jsx" setup>
import { get } from '@vueuse/core';
import { storeToRefs } from 'pinia';
// apis
// hooks
// utils
// stores
import { useStoreSystem } from '@src/stores';
// configs
// components
import ImageLogo from '../assets/images/logo.png';
// props
// emits
// refs
// computed
// methods
// watch

const storeSystem = useStoreSystem();
const { setCollapsed } = storeSystem;
const { computedCollapsed } = storeToRefs(storeSystem);
</script>
<style lang="less" module>
@import './SystemLayout.module.less';
</style>
